<template>
	<view v-if="posterImageStatus" class="poster-first">
		<div class="posterCanvasWarp">
			<canvas class="posterCanvas" canvas-id="myCanvas"></canvas>
		</div>
		<!-- <view class="poster-pop" v-show="!canvasStatus">
      <image
        :src="`${A_VUE_APP_RESOURCES_URL}/images/poster-close.png`"
        class="close"
        @click="posterImageClose"
      />
      <view class="canvas" ref="poster">
        <image class="image" :src="posterData.image" alt="商品图片" />
        <view class="text black">
          <text v-text="posterData.title"></text>
        </view>
        <view class="text rad">
          <text v-text="'￥' + posterData.price"></text>
        </view>
        <view class="code">
          <view class="code-img">
            <image :src="posterData.code" show-menu-by-longpress mode="widthFix" alt="二维码" />
          </view>
          <view class="code-text">
            <text>长按识别二维码 立即购买</text>
          </view>
        </view>
      </view>
      <view class="save-poster" @click="savePosterPath">生成图片</view>
    </view>-->
		<view class="poster-pop" v-show="canvasStatus">
			<img :src="`${A_VUE_APP_RESOURCES_URL}/images/poster-close.png`" class="close" @click="posterImageClose"
				mode="widthFix" />
			<image :src="posterImage" alt="tp" class="poster-image" show-menu-by-longpress mode="widthFix" />
			<view class="save-poster" @click="saveImg">保存海报</view>
		</view>
		<view class="mask" v-show="canvasStatus"></view>
	</view>
</template>

<script>
	// import html2canvas from "html2canvas";
	import {
		PosterCanvas
	} from '@/utils'
	import {
		getProductPoster
	} from '@/api/store'
	import log from '@/utils/log.js';
	import {
		getSetting,
		downloadImageFromURL
	} from '@/utils/download.js'

	export default {
		name: 'StorePoster',
		props: {
			posterImageStatus: Boolean,
			posterData: Object,
			goodId: String,
		},
		data: function() {
			return {
				canvasStatus: false,
				posterImage: '',
				isIOS: false,
				tempFilePath:null
			}
		},
		watch: {
			posterImageStatus: function() {
				var that = this
				if (that.posterImageStatus === true) {
					that.$nextTick(function() {
						that.savePosterPath()
					})
				}
			},
		},
		mounted() {
			let res = uni.getSystemInfoSync();
			let {
				platform
			} = res
			this.isIOS = platform === 'ios'
		},
		methods: {
			posterImageClose: function() {
				this.canvasStatus = false
				this.$emit('setPosterImageStatus')
			},
			saveImg: function() {
				this.beforeSave()
			},
			beforeSave() {
				// #ifdef APP-PLUS
				if (this.isIOS) {
					this.saveBillImage();
				} else {
					getSetting('android.permission.WRITE_EXTERNAL_STORAGE', '检测到您没打开保存到相册功能权限，是否去设置打开？', res => {
						this.saveBillImage();
					});
				}

				// #endif
				// #ifdef MP-WEIXIN
				getSetting('scope.writePhotosAlbum', '检测到您没打开保存到相册功能权限，是否去设置打开？', res => {
					this.saveBillImage();
				});
				// #endif
				// #ifdef MP-TOUTIAO
				getSetting('scope.album', '检测到您没打开保存到相册功能权限，是否去设置打开？', res => {
					this.saveBillImage();
				});
				// #endif
			},
			async saveBillImage(tip = '保存中') {
				uni.showLoading({
					title: tip
				});
				try{
					let res=await downloadImageFromURL(this.posterImage)
					console.log("downloadImageFromURL",res)
					this.tempFilePath=res.tempFilePath
					this.saveImage();
				}catch(e){
					console.log("downloadImageFromURL:fail",e)
					uni.hideLoading();
					//TODO handle the exception
				}
			},
			downloadFile1(url) {
				uni.authorize({
					scope: 'scope.writePhotosAlbum',
					success() {
						uni.downloadFile({
							url,
							fail: function(res) {
								uni.showModal({
									title: '提示',
									content: '保存失败',
								})
								log.info('uni.downloadFile，fail：', JSON.stringify(res));
							},
							success: function(res) {
								uni.saveImageToPhotosAlbum({
									filePath: res.tempFilePath,
									success: function() {
										uni.showModal({
											title: '提示',
											content: '保存成功',
										})
									},
									fail: function() {
										uni.showModal({
											title: '提示',
											content: '保存失败',
										})
										log.info('uni.saveImageToPhotosAlbum，fail：', JSON
											.stringify(res));
									},
								})
								console.log(res)
							},
						})
					},
				})
			},

			saveImage(tip = '保存中') {
				uni.saveImageToPhotosAlbum({
					filePath: this.tempFilePath,
					success: () => {
						uni.hideLoading();
						uni.showToast({
							title: '保存成功',
							type: 'success',
						});
					},
					fail: err => {
						// #ifdef APP-PLUS
						if (err.errCode == 2) {
							uni.hideLoading();
							getSetting('photoLibrary', '检测到您没打开保存到相册功能权限，是否去设置打开？', res => {
								this.saveImage();
							});
							return;
						}
						// #endif
						var str = err && err.errMsg;
						if (str && str.indexOf('cancel') != -1) {
							str = '取消保存';
						}
						uni.showToast({
							title: str,
							type: 'error',
						});
					},
					complete: res => {
						uni.hideLoading();
					}
				});
			},
			savePosterPath: function() {
				const that = this

				uni.showLoading({
					title: '海报生成中',
					mask: true,
				})
				getProductPoster(this.goodId, {
						from: this.$deviceType == 'weixin' || this.$deviceType == 'weixinh5' ? 'uniappH5' : this
							.$deviceType,
					})
					.then(res => {
						console.log("savePosterPath", res)
						this.canvasStatus = true
						this.posterImage = res.data
					})
					.finally(() => {
						uni.hideLoading()
					})
				// return;
				// //清空图片重新生成
				// that.posterImage = "";
				// uni.showLoading({ title: "海报生成中", mask: true });
				// console.log(this);
				// var prodId = that.$yrouter.currentRoute.query.id;
				// uni.downloadFile({
				//   url:
				//     this.$VUE_APP_API_URL +
				//     "/shareImg/" +
				//     prodId +
				//     "?shareImgName=" +
				//     this.posterData.code,
				//   fail: function(res) {},
				//   success: function(res) {
				//     that.canvasStatus = true;
				//     that.posterImage = res.tempFilePath;
				//     uni.hideLoading();
				//   }
				// });
			},
		},
	}
</script>

<style scoped lang="less" lang="less">
	.poster-first {
		overscroll-behavior: contain;
	}

	.poster-pop {
		width: 4.5 * 100rpx;
		height: 8 * 100rpx;
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		z-index: 99;
		top: 50%;
		margin-top: -4.6 * 100rpx;
	}

	.poster-pop .canvas {
		background-color: #ffffff;
		height: 8 * 100rpx;
	}

	.poster-pop .poster-image {
		width: 100%;
		height: auto;
	}

	.poster-pop .canvas .image {
		width: 4.5 * 100rpx;
		height: 4.5 * 100rpx;
		display: block;
	}

	.poster-pop .canvas .text {
		text-align: center;
		color: #000000;
		margin-top: 0.32 * 100rpx;
	}

	.poster-pop .canvas .text.black {
		height: 0.68 * 100rpx;
	}

	.poster-pop .canvas .text.rad {
		color: #ff0000;
	}

	.poster-pop .canvas .code {
		height: 1.4 * 100rpx;
		display: flex;
	}

	.poster-pop .canvas .code .code-img {
		width: 33%;
		padding: 0.06 * 100rpx;
	}

	.poster-pop .canvas .code .code-img image {
		width: 100%;
	}

	.poster-pop .canvas .code .code-text {
		width: 60%;
		font-size: 0.12 * 100rpx;
		line-height: 1.64 * 100rpx;
	}

	.poster-pop .close {
		width: 0.46 * 100rpx;
		height: 0.75 * 100rpx;
		position: fixed;
		right: 0;
		top: -0.73 * 100rpx;
		display: block;
	}

	.poster-pop .save-poster {
		background-color: #3383fe;
		font-size: 0.22 * 100rpx;
		color: #fff;
		text-align: center;
		height: 0.76 * 100rpx;
		line-height: 0.76 * 100rpx;
		width: 100%;
		margin-top: -0.1 * 100rpx;
		border-radius: 0 0 10rpx 10rpx;
	}

	.poster-pop .keep {
		color: #fff;
		text-align: center;
		font-size: 0.25 * 100rpx;
		margin-top: 0.1 * 100rpx;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		z-index: 9;
	}
</style>